<template>
  <div class="recomme-box">
       <div class="recomme-name"> <img class="xuanzhuan" src="../../assets/img/left.svg" alt=""/> &nbsp;&nbsp; 美食推荐 &nbsp;&nbsp; <img src="../../assets/img/left.svg" alt=""/> </div>
       <div class="huan2">
         <div>
           <img src="../../assets/img/huan.png" />
         </div>
          <div>
            <a href="#"><span>换一换</span></a>
          </div>
        </div>
       <div class="food-box">
         <div class="food-item">
           <div :class="{chu:testShow}" class="food-img"> <a href="/showfood"><img src="../../assets/img/t1.png" alt=""></a></div>
          <div class="food-text">
              <div :class="{diao:testShow}"><img class="deng" src="../../assets/img/deng.svg" alt=""></div>
              <div :class="{chu:testShow}"> <span class="food-name">好吃的东西</span></div>
              <div :class="{mohu:testShow}"><img class="xinxin" src="../../assets/img/xin.svg" alt=""><img class="xinxin" src="../../assets/img/xin.svg" alt=""><img class="xinxin" src="../../assets/img/xin.svg" alt=""><img class="xinxin" src="../../assets/img/xin.svg" alt=""><img class="xinxin" src="../../assets/img/xin.svg" alt=""></div>
              <div :class="{xia:testShow}" class="food-jies"><span>很多很多字啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</span></div>
              <div :class="{youchu:testShow}" class="food-more"> <span> <a href="/sortpage">更多美食</a></span></div>
          </div>
         </div>

         <div class="food-item">
           <div :class="{chu:testShow}" class="food-img"> <a href="/showfood"><img src="../../assets/img/t1.png" alt=""></a></div>
          <div class="food-text">
              <div :class="{diao:testShow}"><img class="deng" src="../../assets/img/deng.svg" alt=""></div>
              <div :class="{chu:testShow}"> <span class="food-name">好吃的东西</span></div>
              <div :class="{mohu:testShow}"><img class="xinxin" src="../../assets/img/xin.svg" alt=""><img class="xinxin" src="../../assets/img/xin.svg" alt=""><img class="xinxin" src="../../assets/img/xin.svg" alt=""><img class="xinxin" src="../../assets/img/xin.svg" alt=""><img class="xinxin" src="../../assets/img/xin.svg" alt=""></div>
              <div :class="{xia:testShow}" class="food-jies"><span>很多很多字啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</span></div>
              <div :class="{youchu:testShow}" class="food-more"> <span> <a href="/sortpage">更多美食</a></span></div>
          </div>
         </div>
       </div>


       <div class="food-box food-box2">
         <div class="food-item">
           <div class="food-text">
              <div :class="{diao:testShow2}"><img class="deng" src="../../assets/img/deng.svg" alt=""></div>
              <div :class="{chu:testShow2}"> <span class="food-name">好吃的东西</span></div>
              <div :class="{mohu:testShow2}"><img class="xinxin" src="../../assets/img/xin.svg" alt=""><img class="xinxin" src="../../assets/img/xin.svg" alt=""><img class="xinxin" src="../../assets/img/xin.svg" alt=""><img class="xinxin" src="../../assets/img/xin.svg" alt=""><img class="xinxin" src="../../assets/img/xin.svg" alt=""></div>
              <div :class="{xia:testShow2}" class="food-jies"><span>很多很多字啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</span></div>
              <div :class="{youchu:testShow2}" class="food-more"> <span> <a href="/sortpage">更多美食</a></span></div>
          </div>
           <div :class="{chu:testShow2}" class="food-img"> <a href="/showfood"><img src="../../assets/img/t1.png" alt=""></a></div>
         </div>

         <div class="food-item">
           <div class="food-text">
              <div :class="{diao:testShow2}"><img class="deng" src="../../assets/img/deng.svg" alt=""></div>
              <div :class="{chu:testShow2}"> <span class="food-name">好吃的东西</span></div>
              <div :class="{mohu:testShow2}"><img class="xinxin" src="../../assets/img/xin.svg" alt=""><img class="xinxin" src="../../assets/img/xin.svg" alt=""><img class="xinxin" src="../../assets/img/xin.svg" alt=""><img class="xinxin" src="../../assets/img/xin.svg" alt=""><img class="xinxin" src="../../assets/img/xin.svg" alt=""></div>
              <div :class="{xia:testShow2}" class="food-jies"><span>很多很多字啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</span></div>
              <div :class="{youchu:testShow2}" class="food-more"> <span> <a href="/sortpage">更多美食</a></span></div>
          </div>
           <div :class="{chu:testShow2}" class="food-img"> <a href="/showfood"><img src="../../assets/img/t1.png" alt=""></a></div>
         </div>
          
       </div>

  </div>
</template>

<script>
export default {
    name:'Recommend',
    data() {
    return {
      testShow:false,
      testShow2:false,
    }
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
    
  },
  methods: {
    handleScroll() {
      this.currentScroll = window.pageYOffset //表示当前滚动的位置
      console.log(this.currentScroll);
      if (this.currentScroll <= 400) { //当前滚动位置到达testref的时候，显示div（100作为调整用）
        this.testShow = false;
      }

      if (this.currentScroll >= 400) { //当前滚动位置到达testref的时候，显示div（100作为调整用）
        this.testShow = true;
      }
      if (this.currentScroll >= 1000) { //当前滚动位置到达testref的时候，显示div（100作为调整用）
        this.testShow = false;
      }


      if (this.currentScroll <= 500) { //当前滚动位置到达testref的时候，显示div（100作为调整用）
        this.testShow2 = false;
      }
      
      if (this.currentScroll >= 500) { //当前滚动位置到达testref的时候，显示div（100作为调整用）
        this.testShow2 = true;
      }
      if (this.currentScroll >= 1100) { //当前滚动位置到达testref的时候，显示div（100作为调整用）
        this.testShow2 = false;
      }
    }
  },
}
</script>

<style>

.recomme-box{
  margin-top: 0.5rem;
  /* background-color: antiquewhite; */
}



.recomme-name{
  display: flex;
  font-size: 0.3rem;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-top: 1rem;
}

.recomme-name img{
  width: 0.5rem;
  height: 0.5rem;
}

.xuanzhuan{
  transform: rotateZ(180deg);
}

.food-box{
  display: flex;
  font-size: 0.1rem;
  width: 100%;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: space-around;
  background-color: rgb(245,245,245);
}

.food-item{
  display: flex;
  margin-top: 0.3rem;
  width: 8rem;
}

.food-item div{
  width: 4rem
}


.food-img img{
  width: 4rem;
  height: 100%;
}

.food-text{
  text-align: center;
  background-color: rgb(255, 255, 255);
}

.food-text div{
  width: 4rem;
}

.food-name{
  font-size: 0.3rem;
}

.food-more{
  font-size: 0.15rem;
  margin-top: 0.3rem;
  margin-bottom: 0.2rem;
}

.food-more span{
  display:inline-block;
  width:1.3rem;
  height: 0.3rem;
  line-height: 0.3rem;
  border: 1px solid black;
  border-radius: 0.15rem;
}

.food-jies{
  font-size: 0.15rem;
  margin-top: 0.2rem;
  text-align: center;
}

.food-jies span{
  display: inline-block;
  width: 90%;
  text-align: left;
}

.food-more a{
  text-decoration: none;
  color: rgb(0, 0, 0);
}

.food-box2{
  padding-bottom: 1rem;
}

.deng{
  width: 0.5rem;
}

.xinxin{
  width: 0.2rem;
  margin-top: 0.1rem;
}

.food-more span:hover{
  cursor: pointer;
  background-color: coral;
}

.huan2{
  display: flex;
  width: 100%;
  height: 0.5rem;
  text-align: left;
  line-height: 0.5rem;
  align-items: center;
  background-color: rgb(245,245,245);
}
.huan2 img{
  width: 0.4rem;
  height: 0.4rem;
  transition: 1s all;
  margin-left: 1rem;
}

.huan2 span {
  display: inline-block;
  width: 1rem;
  font-size: 0.2rem;
}

.huan2 a{
  text-decoration: none;
  color: #000;
}

.huan2:hover {
  cursor: pointer;
}
.huan2:hover img {
  transform: rotate(360deg);
}

.chu {
  animation: chu 0.6s linear 1;
}

/* .diao{
  animation: diao 0.6s  linear 1;
}

.mohu{
  animation: mohu 0.6s  linear 1;
}

.xia{
  animation: xia 0.6s  linear 1;
}

.youchu{
  animation: youchu 0.6s  linear 1;
} */

@keyframes chu{
      0% {
        opacity: 0.2;
        transform:scale(0.2);
      }
 
      100% {
        opacity: 1;
        transform:scale(1);
      }
  }

@keyframes diao{
      0% {
        transform:translateY(-100px);
      }
 
      100% {
        transform:translateY(0px);
      }
  }

  @keyframes mohu{
      0% {
        transform:translateX(-100px);
      }
 
      100% {
        transform:translateX(0px);
      }
  }

  @keyframes xia{
      0% {
        transform:translateY(100px);
      }
 
      100% {
        transform:translateY(0px);
      }
  }

    @keyframes youchu{
      0% {
        transform:translateX(100px);
      }
 
      100% {
        transform:translateX(0px);
      }
  }


</style>